<template>
  <div style="height:100%">
    <mu-container>
      <mu-row>
        <mu-col span="2">
          <back-img></back-img>
        </mu-col>
        <mu-col span="10">
          <mu-auto-complete
            @select="select"
            @keyup.enter="select(suggestMsg)"
            underline-color="#BBB"
            :data="suggests"
            v-model="suggestMsg"
            full-width
            max-height="400"
            :max-search-results="maxResult"
          >
            <template slot-scope="scope" v-show="something">
              <mu-list-item-action>
                <mu-icon value="search" color="#888"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-content v-html="scope.highlight">11</mu-list-item-content>
            </template>
          </mu-auto-complete>
        </mu-col>
      </mu-row>
    </mu-container>
    <music-list :list="single" @search="getSong"></music-list>
  </div>
</template>
<script>
import MusicList from './MusicList'
import { debounce } from '../util'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    MusicList
  },
  data () {
    return {
      suggests: [],
      suggestMsg: '',
      maxResult: 8,
      something: false,
      single: []
    }
  },
  created () {
    this.$watch('suggestMsg', debounce((val) => {
      this.search(val)
    }, 300))
  },
  methods: {
    ...mapMutations({
      setFullScreen: 'SET_FULL_SCREEN',
      setPlayingState: 'SET_PLAYING_STATE',
      setCurrentIndex: 'SET_CURRENT_INDEX',
      setPlayMode: 'SET_PLAY_MODE',
      setPlayList: 'SET_PLAYLIST',
      setURL: 'SET_URL'

    }),
    select (value, item) {
      if (value !== '') {
        this.$http
          .get('/search', { params: { keywords: value } })
          .then(response => {
            this.single = response.result.songs
          })
      }
    },
    search (value) {
      if (value !== '') {
        this.$http
          .get('/search/suggest', {
            params: { keywords: value, type: 'mobile' }
          })
          .then(response => {
            let res = response.result.allMatch
            this.suggests = []
            res.forEach(element => {
              this.suggests.push(element.keyword)
            })
            res = []
          })
      }
    },
    getSong (singleitem) {
      this.$http
        .get('/song/url', { params: { id: singleitem.id } })
        .then(result => {
          this.setURL(result.data[0].url)
          console.log(this.url)
        })
        .catch(err => { console.log(err) })
    }
  },
  computed: {
    ...mapGetters([
      'fullScreen',
      'playlist',
      'currentSong',
      'playing',
      'currentIndex',
      'mode',
      'sequenceList',
      'favoriteList',
      'url'
    ])
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #d8000f;
  height: 56px;
  .mu-input {
    font-size: 28px;
    margin-top: 10px;
    padding: 0;
    /deep/ input {
      color: #fff;
      font-size: 22px;
    }
    /deep/.mu-input-line {
      background-color: #dddddd;
    }
  }
  ul{
    height: calc(100vh - 110px);
  }
}
</style>
<style lang="scss">
.mu-popover {
  min-width: 90% !important;
  margin: 14px 0 0 20px;
  left: 0 !important;
  .mu-option-list {
    padding: 0;
  }
  li.mu-option {
    height: 50px;
    border-bottom: 1px solid #d4d4d4;
    display: flex;
    align-items: center;
    .mu-item-action {
      min-width: 32px;
    }
  }
}
</style>
